<template>
  <div class="product-box">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      :immediate-check="false"
      finished-text="没有更多了"
      @load="onLoad"
      :key="3"
    >
    <div 
      class="good-list">
      <div
        class="good-item"
        v-for="(value, index) in goods"
        :key="index"
      >
      <div @click="toshop(value.F_ProductId,$store.state.userInfo.F_Question)">
       <!-- <a :href="'http://www.higuang365.com/wap/product-'+value.F_ProductId+'.html'+($store.state.userInfo.F_Question?'?parents_id='+$store.state.userInfo.F_Question:'')"> -->
      <!-- <div @click="$router.push('/product/' + value.F_ProductId+'/'+$store.state.userInfo.F_Question)"> -->
      <!-- <div @click="$router.push('/product/' + value.F_ProductId)"> -->
      <!-- <div>  -->
              <!-- <img
                class="product-img"
                :src="'http://higuang365.com/' + value.F_pic_url"
                alt=""
              /> -->
              <van-image
                    class="lazy-img"
                    width="100%"
                    height="calc(50vw - 2.2rem)"
                    lazy-load
                    :src="'http://higuang365.com/' + value.F_pic_url"
                    />
              <div class="good-desc">
                <div class="county">
                    <img
                      class="county-icon"
                      v-if="value.F_yuliu2"
                      :src="'http://higuang365.com/' + value.F_yuliu2"
                      alt=""
                    />

                  <div class="county-title">{{ value.F_BrandCountrie }}</div>
                </div>

                <div class="title">{{ value.F_Name }}</div>
                <span class="price">¥ {{ value.F_Price }}</span>
                <br/>
                <span class="estimate"> {{value.F_Amount}}</span>
                <span  class="share"
                @click.stop="showShare(value,$store.state.userInfo.F_Question)">
                   <!-- <a href="http://www.higuang365.com/wap/index.html" -->
                 
                   <!-- @click.stop="showShare()" -->
                  <van-icon
                    name="share-o"
                  />分享</span>

                <!-- <div class="shop">{{ value["店铺"] }}</div> -->
              </div>
            </div>
      </div>
      </div>
    </van-list>
  </div>
</template>
<script>
import { toRefs,onDeactivated,onActivated } from "vue";
export default {
  name: "product",
  props:{
      list:{
          type:Object
      }
  },
  setup(props,{emit}) {
    const onLoad= ()=>{
            emit('to-load',true)
        };
        let scrollTop = 0;
    onActivated(() => {
      document.getElementById("app").scrollTop = scrollTop;
    });
    onDeactivated(() => {
      scrollTop = document.getElementById("app").scrollTop;
    });
    const showShare = (value,F_Question) => {
      
      let purl ='http://higuang365.com/'+value.F_pic_url; //可以是本地图片
      var surl = 'http://www.higuang365.com/wap/product-'+value.F_ProductId+'.html'+(F_Question?'?parents_id='+F_Question:''); //分享的链接
      let msg = {
        title: "嗨逛全球", //标题
        content: value.F_Name, //内容
        thumbs: [purl], //缩略图
        href: surl,
        extra: {
          scene: "WXSceneChooseByUser",
        },
      };
      if(navigator.userAgent.indexOf('haiguang_mobile')> -1){
        window.location.href = `higuang|shareGood|${msg.title}|${msg.content}|${purl}|${surl}`;
      }
      else{
        window.location.href = 'http://www.higuang365.com/wap/product-'+value.F_ProductId+'.html'+(F_Question?'?parents_id='+F_Question:'');
      }
    };
    const toshop=(F_ProductId,F_Question)=>{
        // window.location.href='http://www.higuang365.com/wap/product-'+F_ProductId+'.html'+(F_Question?'?parents_id='+F_Question:'');
         window.location.href =
          "http://www.higuang365.com/wap/#/product?id=" +
          F_ProductId + "&parents_id=" + F_Question ;
      
    }
    return { ...toRefs(props.list), onLoad,showShare,toshop };
  },
};
</script>

<style lang="scss" scoped>
@import "@/common/style/mixin";
.product-box {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .good-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100vw;
  }
  .good-item {
    box-sizing: border-box;
    width: 50%;
    border-bottom: 1px solid #e9e9e9;
    padding: 1rem;
    .good-desc {
      text-align: left;
      font-size: 1.2rem;
      padding-top: 1rem;
      position: relative;
      .county{
        display: flex;
        .county-icon {
       width: 2rem;
    height: 100%;
      }
      .county-title {
    color: #999;
    margin-left: .5rem;
}
}
      .title {
        height: 3.4rem;
        line-height: 1.6rem;
        color: #222333;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .price {
        font-size: 1.4rem;
        margin-top: 1rem;
        color: #fd5633;
      }
      .share {
        color: #3c8a58;
        position: absolute;
        right: 0;
        z-index: 10;
      }
      .estimate {
          color: #fd5633;
      }
      // .shop {
      //   font-size: 1.2rem;
      //   overflow: hidden;
      //   text-overflow: ellipsis;
      //   white-space: nowrap;
      //   color: #999;
      //   width: 90%;
      //   margin: auto;
      //   margin-top: 5px;
      // }
    }
    &:nth-child(2n + 1) {
      border-right: 1px solid #e9e9e9;
    }
  }
}
</style>